<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello bootstrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

</head>
<body>
<div class="container">
    <h1>Hello,BootStrap按钮组</h1>
    <div class="btn-group" role="group">
        <button class="btn btn-primary" type="button">按钮1</button>
        <button class="btn btn-success" type="button">按钮2</button>
        <button class="btn btn-danger" type="button">按钮3</button>
    </div>

    <h2>图标按钮组</h2>
    <div class="btn-group" role="group">
        <button class="btn btn-default" type="button" title="左对齐"><span class="glyphicon glyphicon-align-left"></span>
        </button>
        <button class="btn btn-default" type="button" title="居中对齐"><span
                class="glyphicon glyphicon-align-center"></span></button>
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-right"></span></button>
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-ok"></span></button>
    </div>

    <h2>图标按钮组-工具栏</h2>
    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group btn-group-sm" role="group">
            <button class="btn btn-default" type="button" title="左对齐"><span
                    class="glyphicon glyphicon-align-left"></span></button>
            <button class="btn btn-default" type="button" title="居中对齐"><span
                    class="glyphicon glyphicon-align-center"></span></button>
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-right"></span></button>
        </div>
        <div class="btn-group btn-group-lg" role="group">
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
            <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-ok"></span></button>
        </div>

    </div>

    <h2>按钮组与下拉菜单组合在一起</h2>
    <div class="btn-group" role="group">
        <button class="btn btn-default" type="button" title="左对齐"><span class="glyphicon glyphicon-align-left"></span>
        </button>
        <button class="btn btn-default" type="button" title="居中对齐"><span
                class="glyphicon glyphicon-align-center"></span></button>
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-right"></span></button>
        <!-- 嵌套另一个下拉菜单的按钮组 -->
        <div class="btn-group" role="group">
            <div class="dropdown">
                <!--下拉按钮定义-->
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    下拉菜单<span class="caret"></span>
                </button>
                <!-- 定义下拉菜单项 -->
                <ul class="dropdown-menu">
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">子菜单4</a></li>
                </ul>
            </div>
        </div>
    </div>

    <h2>垂直排列</h2>
    <div class="btn-group-vertical" role="group">
        <button class="btn btn-default" type="button" title="左对齐"><span class="glyphicon glyphicon-align-left"></span>
        </button>
        <button class="btn btn-default" type="button" title="居中对齐"><span
                class="glyphicon glyphicon-align-center"></span></button>
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-right"></span></button>
        <!-- 嵌套另一个下拉菜单的按钮组 -->
        <div class="btn-group-vertical" role="group">
            <div class="dropdown">
                <!--下拉按钮定义-->
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                    下拉菜单<span class="caret"></span>
                </button>
                <!-- 定义下拉菜单项 -->
                <ul class="dropdown-menu">
                    <li><a href="#">子菜单1</a></li>
                    <li><a href="#">子菜单2</a></li>
                    <li><a href="#">子菜单3</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">子菜单4</a></li>
                </ul>
            </div>
        </div>

        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-camera"></span></button>

    </div>

    <h1>按钮组-填满父容器</h1>
    <div class="btn-group btn-group-justified" role="group">
        <a class="btn btn-primary" href="#" role="button">按钮1</a>
        <a class="btn btn-success" href="#">按钮2</a>
        <a class="btn btn-danger" href="#">按钮3</a>
    </div>
    <p class="text-info">a标签可以直接嵌在 btn-group btn-group-justified中</p>

    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group">
            <button class="btn btn-primary" type="button">按钮1</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-info" type="button">按钮2</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-danger" type="button">按钮3</button>
        </div>
    </div>
    <p class="text-info">button标签顼要再嵌一次 btn-group 才可以</p>

    <h2>分裂式按钮组</h2>
    <div class="btn-group dropup">
        <button class="btn btn-default" type="button">Default</button>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
            <span class="caret"></span>
        </button>
        <!-- 定义下拉菜单项 -->
        <ul class="dropdown-menu">
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
            <li><a href="#">子菜单3</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">子菜单4</a></li>
        </ul>
    </div>

    <div class="btn-group dropup">
        <button class="btn btn-primary" type="button">Primary</button>
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
            <span class="caret"></span>
        </button>

        <!-- 定义下拉菜单项 -->
        <ul class="dropdown-menu">
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
            <li><a href="#">子菜单3</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">子菜单4</a></li>
        </ul>
    </div>
</div>

<!-- 导入js文件 -->
<script type="text/javascript" src="component/jquery/jquery.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>